<template>
  <el-form :model="form" ref="form" :rules="rules" class="form">
    <el-form-item class="form-item" prop="username">
      <el-input v-model="form.username" placeholder="用户名手机">
      </el-input>
    </el-form-item>

    <el-form-item class="form-item" prop="captcha">
      <el-input v-model="form.captcha" placeholder="验证码">
        <template slot="append">
          <el-button @click="handleSendCaptcha">
            发送验证码
          </el-button>
        </template>
      </el-input>
    </el-form-item>

    <el-form-item class="form-item">
      <el-input v-model="form.nickname" placeholder="你的昵称">
      </el-input>
    </el-form-item>

    <el-form-item class="form-item" prop="password">
      <el-input v-model="form.password" placeholder="密码" type="password"></el-input>
    </el-form-item>

    <el-form-item class="form-item" prop="checkPassword">
      <el-input v-model="form.checkPassword" placeholder="确认密码" type="password">
      </el-input>
    </el-form-item>

    <el-button class="submit" type="primary" @click="handleRegSubmit">
      注册
    </el-button>
  </el-form>
</template>

<script>
  export default {
    data() {
      var checkPhone = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('手机号不能为空'));
        } else {
          const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
          console.log(reg.test(value));
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的手机号'));
          }
        }
      }

      var pwd = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('密码不能为空'));
        } else {
          const reg = /^(\w){6,6}$/
          console.log(reg.test(value));
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的密码'));
          }
        }
      }

      var yanzheng = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('验证码不能为空'));
        } else {
          const reg = /^(\w){6,6}$/
          console.log(reg.test(value));
          if (reg.test(value)) {
            callback();
          } else {
            return callback(new Error('请输入正确的验证码'));
          }
        }
      }

       var validatePass = (rule, value, callback) => {
              if (value === '') {
                callback(new Error('请再次输入密码'));
              } else if (value !== this.form.password) {
                callback(new Error('两次输入密码不一致!'));
              } else {
                callback();
              }
            };


      return {
        // 表单数据
        form: {
          username: "",
          captcha: "", // 手机验证码
          nickname: "", // 昵称
          password: "",
          checkPassword: "" // 确认密码
        },
        // 表单规则
        rules: {
          username: [{
            validator: checkPhone,
            trigger: 'blur'
          }],
          captcha: [{
            validator: yanzheng,
            trigger: 'blur'
          }],
          password: [{
            validator: pwd,
            trigger: 'blur'
          }],
          checkPassword: [{
            validator: validatePass,
            trigger: 'blur'
          }],

        },
      }
    },
    methods: {
      // 发送验证码
      handleSendCaptcha() {
        if(!this.form.username){
          this.$message.error('手机号不能为空');
          return
        }
        this.$store.dispatch('user/sendCaptcha', this.form.username).then(code=>{
        // console.log(code);
        this.$message.success('模拟手机返回的验证码'+code)
        })
    
      },
      // 注册
      handleRegSubmit() {
        // 验证成功才提交
        this.$refs.from.validate(valid=>{
         if(valid){
            console.log(this.form)
         }
        })

      }
    }
  }
</script>

<style scoped lang="less">
  .form {
    padding: 25px;
  }

  .form-item {
    margin-bottom: 20px;
  }

  .form-text {
    font-size: 12px;
    color: #409EFF;
    text-align: right;
    line-height: 1;
  }

  .submit {
    width: 100%;
    margin-top: 10px;
  }
</style>
